<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>资料设置</template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 设置备注和标签区域开始 -->
        <div class="label-wrap" @click="$router.push('/setLabel')">
            <TridentCellItem :item="{title: '设置备注和标签'}"/>
        </div>
        <!-- 设置备注和标签区域结束 -->

        <!-- 加入黑名单区域开始 -->
        <div class="blacklist-wrap">
            <div class="left">加入黑名单</div>
            <div class="right">
                <van-switch v-model="is_blacklist" active-color="#27BA9B" inactive-color="#dcdee0" size="18px" />
            </div>
        </div>
        <!-- 加入黑名单区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const is_blacklist = ref(false)
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;
    .label-wrap {
        padding-top: 45px;
    }
    .blacklist-wrap {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 15px 10px;
        color: #000;
        .left {
            font-size: 16px;
            flex: 1;
        }
        .right {
            width: 50px;
        }
    }
}
</style>